<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品名</th>
        <th>价格</th>
        <th>库存</th>
    </tr>
</table>
<script>
    //定义一个空的person对象
    function Person() {}
    //实例化一个person对象
    let p1 = new Person();
    p1.name = "张三";
    p1.age = 18;
    p1.run = function () {
        console.log("我叫:" +this.name +"今年:"+this.age);
    }
    //调用方法
    p1.run();
    //直接实例化对象
    let p2 = {};
    p2.name = "李白";
    p2.age = 18;
    p2.run = function () {
        console.log("李白执行了!")
    }
    p2.run();
    //实例化自带属性和方法的对象
    let p3 = {
        name:"刘备",
        age:30,
        run:function () {
            alert(this.name+":"+this.age);
        }
    };
    p3.run();
    //通过自定义对象封装数据
    let arr = [
        {name:"小米手机",price:"3000",count:900},
        {name:"小米电视",price:"3000",count:800},
        {name:"华为手机",price:"5000",count:100},
        {name:"华为电视",price:"4000",count:600},
    ]
    for (let item of arr) {
        let tr = document.createElement("tr");
        let nameTd = document.createElement("td");
        let priceTd = document.createElement("td");
        let countTd = document.createElement("td");
        let table = document.querySelector("table");
        nameTd.innerText = item.name;
        priceTd.innerText = item.price;
        countTd.innerText = item.count;
        tr.append(nameTd,priceTd,countTd);
        table.append(tr);
    }
</script>
</body>
</html>